<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <template id="sub-com1">
        <section>
            <h2>我是子组件2</h2>
            <p>使用一个子组件，把列表作为参数传给子组件，让子组件去自己循环。</p>
            <ul>
                <li v-for="item in listData">{{item.name}}，价格：{{item.price}}</li>
            </ul>
        </section>
    </template>
    <h2>父传子的步骤</h2>
    <ol>
        <li>在子组件的props属性中定义要传入的参数</li>
        <li>父组件使用子组件的标签上，通过属性去传参（可以使用v-bind完成动态传参）。</li>
    </ol>
    <main id="app">
        <sub-com1 :list-data="parentList"></sub-com1>
        <h2>循环生成子组件</h2>
        <p>循环生成子组件，把列表中的元素传给子组件</p>
        <ul>
            <sub-com2 v-for="item in parentList" :item="item"></sub-com2>
        </ul>
    </main>
</body>
<script src="../../vue.js"></script>
<script>
     Vue.component("sub-com1", {
        template: "#sub-com1",
        props: {
            listData: {
                type: Array,
                // 是否必传：默认false
                required: true,
                // default如果是基础值类型，可以直接赋值，如果是引用数据类型，推荐使用方法，返回一个新对象
                default: () => {
                    return []
                }
            }
        }
    });

    Vue.component("sub-com2", {
        template: `<li>{{item.name}}，价格：{{item.price}}</li>`,
        props: {
            item: {
                type: Object,
                // 是否必传：默认false
                required: true,
                // default如果是基础值类型，可以直接赋值，如果是引用数据类型，推荐使用方法，返回一个新对象
                default: () => {
                    return {}
                }
            }
        }
    });

    new Vue({
        el: "#app",
        data() {
            return {
                parentList: [
                    {name: "葱",price: 2},
                    {name: "姜",price: 3},
                    {name: "蒜",price: 6},
                ]
            }
        }
    })
</script>

</html>